﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webList</title>
<link href="../../css/core.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="wList.js"></script>
<script src="../../js/mask-use.js"></script>	

<style>

body{font-size:12px;}
ul,li{list-style:none; margin:0;padding:0}
td{border-bottom:1px solid #ccc;height:30px;padding:0;margin:0;}
table{border-collapse:collapse}

</style>
</head>

<body>

<div id="p"></div>
<button onclick="fun()">获取当前选中的信息</button>&nbsp;<button onclick="funAll()">获取所有选中的信息</button>
<button onclick="refresh()">刷新数据</button>

</body>
</html>
<script>
var data={
		check:["1","2"],                                              
		"total":37,                                                      
		"rows":[                                                          
			{"name":"Name 1","code":"1","addr":"Address 11","col4":"col4 data"},         
			{"code":"2","name":"Name 2","addr":"Address 13","col4":"col4 data"},         
			{"code":"3","name":"Name 3","addr":"Address 87","col4":"col4 data"},         
			{"code":"22","name":"Name 10","addr":"Address 78","col4":"col4 data"},  
			{"code":"23","name":"Name 10","addr":"Address 78","col4":"col4 data"},  
			{"code":"24","name":"Name 10","addr":"Address 78","col4":"col4 data"},  
			{"name":"Name 10","col4":"col4 data","code":"25"},  
			{"name":"Name 10","addr":"Address 78","code":"100","col4":"col4 data"}     
		]                                                          
	};     

var options1={
		checkformatter:function(obj){
			if(obj.JSON.rows[obj.rowIndex].name=="Name 10")
			{return true}
		},
		keepcheck:true,
		haveNo:true,
		pagesize:10,
		checkbox:true,
		autowidth:true,
		url:'data.json',
		keyname:'code',
		showkey:true,
		headerheight:20,
		rowheight:50,
		swap:{swap:true,single:'red',double:'green'},
		hover:'red',
		optype:'dialog',
		success:function(){
			alert("加载完毕！");
		},
		op:{
			buttons:[
				{
					text:'edit',
					href:'www.xxx.com',
					target:'_blank',
					callback:function(obj){
						alert(obj.key);alert(obj.value);alert(obj.JSON.rows[obj.rowIndex].addr);
						},
					formatter:function(obj){
						return obj.value + "|" + obj.JSON.rows[obj.rowIndex].name;
					}
				},
				{
					text:'delete',
					href:'www.yyy.com/yyy?key=value',
					callback:function(obj){
						alert(obj.key);alert(obj.value);alert(obj.JSON.rows[obj.rowIndex].addr);
						}			
				}
			],
			caption:'操作',width:100},
		columns:[
			{caption:'编号',name:'code',width:170,href:'http://www.baidu.com',target:'_blank',
				formatter:function(obj){
					return '<b>'+obj.value+'</b>';
				}
			},
			{caption:'业务组名称',name:'name',width:100},
			{caption:'可用性',name:'addr',callback:function(object){alert(pk.key);}},
			{caption:'健康状况',name:'col4',callback:function(object){alert(pk.key);},
				formatter:function(obj){
					return '<b>'+obj.value+'</b>';
				}
			}
		]
}
var list1 = new wList("#p",options1);
list1.loadData(data);

function fun(){
	/* 最后一个被选中的复选框的索引、值、是否被选中 */
	alert("索引："+list1.lastCheckIndex);
	alert("主键："+list1.checkValues[list1.lastCheckIndex].key);
	alert("状态："+list1.checkValues[list1.lastCheckIndex].check);
	
}

function funAll(){
	/* 最后一个被选中的复选框的索引、值、是否被选中 */
	var str="";
	for(i=0;i<list1.checkValues.length;i++)
	{
		str =str + "主键：" + list1.checkValues[i].key + " | ";
		str =str + "是否选中：" + list1.checkValues[i].check;
		str =str + "\n";
	}
	alert(str);	
}

function refresh(){
	/* 最后一个被选中的复选框的索引、值、是否被选中 */
	list1.refresh();	
}
</script>